<template>
    <div class="home-screen">
			<van-swipe style="height: 100%;" :autoplay="2000" vertical :show-indicators="false">
				<van-swipe-item v-for="item of swipeData" :key="item.id">
					<van-image width="100%" height="100%" :src="item.img" fit="cover" />
				</van-swipe-item>
			</van-swipe>
			<div class="join-us">
				<van-button class="join-us-button" type="default" size="small" round @click="joinUs">{{ $t('start.joinUs') }}</van-button>
			</div>
		</div>
</template>
<script>
import Fetch from '../../utils/fetch'
import {
	Swipe,
	SwipeItem,
	Image,
	Button
} from "vant";
export default {
	components: {
		VanSwipe: Swipe,
		VanSwipeItem: SwipeItem,
		VanImage: Image,
		VanButton: Button
	},
    data() {
        return {
            swipeData: []
        }
    },
	mounted() {
		this.getBanners();
	},
    methods: {
		getBanners() {
			Fetch('/index/banner', {}).then(r => {
				this.swipeData = r.data
			})
		},
		joinUs() {
			var token = localStorage.getItem('token');
			if (token === undefined || token === null) {
				this.$router.replace('/login')
			} else {
                this.$router.replace('/index')
            }
		},
    }
}
</script>